<template>
    <div>
        <Drawer :visible="visible" side="left" @close="handleClose">
            <template #content>
                <!-- 左右分栏布局 -->
                <div class="flex h-full w-full bg-[#18191c] rounded-xl overflow-hidden">
                    <!-- 左侧边栏 -->
                    <div
                        class="w-16 min-w-16 max-w-16 bg-[#191a1d] flex flex-col items-center justify-center pt-4 pb-4 gap-4 border-r border-[#232428]">
                        <a-tooltip content="Creative Effects" position="right">
                            <button @click="handleShowEffectPanel"
                                class="w-10 h-10 flex items-center justify-center rounded-xl hover:bg-[#232428] transition">
                                <icon-park-effects theme="outline" size="24" :fill="showEffectPanel ? '#7fff00' : '#bfc0c2'" />
                            </button>
                        </a-tooltip>
                        <div class="h-[1px] w-full bg-[#232428]"></div>
                        <a-tooltip content="Image Generation" position="right">
                            <button @click="handleShowImagePanel"
                                class="w-10 h-10 flex items-center justify-center rounded-xl hover:bg-[#232428] transition">
                                <icon-park-picture theme="outline" size="24" :fill="showImagePanel ? '#7fff00' : '#bfc0c2'" />
                            </button>
                        </a-tooltip>
                        <a-tooltip content="Video Generation" position="right">
                            <button @click="handleShowVideoPanel"
                                class="w-10 h-10 flex items-center justify-center rounded-xl hover:bg-[#232428] transition">
                                <icon-park-video theme="outline" size="24" :fill="showVideoPanel ? '#7fff00' : '#bfc0c2'" />
                            </button>
                        </a-tooltip>
                        <a-tooltip content="AI Try-on" position="right">
                            <button
                                    class="w-10 h-10 hidden items-center justify-center rounded-xl hover:bg-[#232428] transition">
                                <icon-park-clothes-crew-neck theme="outline" size="24" class="text-neutral-400" />
                            </button>
                        </a-tooltip>
                    </div>
                    <!-- 中间主操作区和右侧特效类型选择侧栏并排 -->
                    <div class="flex flex-row w-full h-full relative">
                        <!-- 主操作区 -->
                        <Effect :visible="showEffectPanel" @video-generated="handlePreview(2)"  />
                        <VideoAgent 
                            :visible="showVideoPanel" 
                            @video-generated="handlePreview(2)" 
                        />
                        <ImageAgent 
                            :visible="showImagePanel" 
                            @image-generated="handlePreview(1)" 
                        />
                        <!-- 右侧预览区 -->
                        <Preview ref="previewRef" />
                    </div>
                </div>
            </template>
        </Drawer>
    </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import Drawer from '@/components/drawer/index.vue';
import Upload from '@/components/upload/index.vue';
import Effect from './effect.vue';
import VideoAgent from './video.vue';
import ImageAgent from './image.vue';
import Preview from './preview.vue';
import { Effects, PictureOne, VideoTwo, ClothesCrewNeck, Switch, Close, AddPicture, Info } from '@icon-park/vue-next';

// 定义Preview组件的类型
type PreviewComponent = InstanceType<typeof Preview>;

export default defineComponent({
    name: 'Agent',
    components: {
        'icon-park-effects': Effects,
        'icon-park-picture': PictureOne,
        'icon-park-video': VideoTwo,
        'icon-park-clothes-crew-neck': ClothesCrewNeck,
        'icon-park-switch': Switch,
        'icon-park-close': Close,
        'icon-park-add-picture': AddPicture,
        'icon-park-info': Info,
        Drawer,
        Upload,
        Effect,
        Preview,
        VideoAgent,
        ImageAgent
    },
    props: {
        visible: {
            type: Boolean,
            default: false
        }
    },
    data() {
        return {
            showEffectPanel: true,
            showVideoPanel: false,
            showImagePanel: false,
            effects: [
                { title: 'US Style ID Photo', img: '/images/1.png', example: '/images/1-1.png', video: '/videos/1.mp4', effect: '/videos/1-1.mp4', hot: true, step: true, limit: 1 },
                { title: 'One-click 3D Polaroid', img: '/images/2.png', example: '/images/2-1.png', video: '/videos/2.mp4', effect: '/videos/2-1.mp4', hot: true, step: true, limit: 1 },
                { title: 'One-click Figure', img: '/images/3.png', video: '/videos/3.mp4', effect: '/videos/3-1.mp4', hot: true, step: false, limit: 1 },
                { title: 'Hug', img: '/images/4.png', example: '/images/4-1.png', video: '/videos/4.mp4', effect: '/videos/4-1.mp4', step: true, limit: 2 },
                { title: 'Kiss', img: '/images/5.png', example: '/images/4-1.png', video: '/videos/5.mp4', step: true, limit: 2 },
                { title: 'Fight', img: '/images/6.png', example: '/images/4-1.png', video: '/videos/6.mp4', step: true, limit: 2 },
                { title: 'Heart Gesture', img: '/images/7.png', example: '/images/4-1.png', video: '/videos/7.mp4', step: true, limit: 2 },
                { title: 'Soar to the Sky', img: '/images/8.png', example: '/images/8-1.png', video: '/videos/8.mp4', step: true, limit: 1 },
                { title: 'Colorful World', img: '/images/9.png', example: '/images/9-1.png', video: '/videos/9.mp4', step: true, limit: 1 },
                { title: 'Magic Spin', img: '/images/10.png', video: '/videos/10.mp4', step: false, limit: 1 },
                { title: 'Annoy Me', img: '/images/11.png', video: '/videos/11.mp4', step: false, limit: 1 },
                { title: 'Pinch Fun', img: '/images/12.png', video: '/videos/12.mp4', step: false, limit: 1 },
                { title: 'Everything Expands', img: '/images/13.png', video: '/videos/13.mp4', step: false, limit: 1 },
            ],
            selectedEffectIndex: 0,
            showModeDropdown: false,
            modeOptions: [
                { label: 'Standard Mode', value: 1 },
                { label: 'High Quality Mode', value: 2 }
            ],
            selectedMode: 1,
            multiMode: false,
            uploadTabIndex: 0,
            businessLicenseFileList: [],
            previewImages: [
                { main: 'https://p2-kling.klingai.com/bs2/upload-ylab-stunt/special-effect/output/HB1_PROD_ai_web_279888832138684_6784203802823898775/2645106856874439009/temp.png?x-kcdn-pid=112452&x-oss-process=image%2Fresize%2Cw_720%2Ch_1260%2Cm_mfit%2Fformat%2Cwebp', reference: 'https://p2-kling.klingai.com/bs2/upload-ylab-stunt/special-effect/output/HB1_PROD_ai_web_279888832138684_6784203802823898775/2645106856874439009/temp.png?x-kcdn-pid=112452&x-oss-process=image%2Fresize%2Cw_200%2Ch_200%2Cm_mfit%2Fformat%2Cwebp' },
                { main: 'https://p2-kling.klingai.com/bs2/upload-ylab-stunt/special-effect/output/HB1_PROD_ai_web_279885497264816_-3473103075549826410/-4284981086543812658/temp.jpg?x-kcdn-pid=112452&x-oss-process=image%2Fresize%2Cw_720%2Ch_1280%2Cm_mfit%2Fformat%2Cwebp', reference: 'https://p2-kling.klingai.com/bs2/upload-ylab-stunt/special-effect/output/HB1_PROD_ai_web_279885497264816_-3473103075549826410/-4284981086543812658/temp.jpg?x-kcdn-pid=112452&x-oss-process=image%2Fresize%2Cw_200%2Ch_200%2Cm_mfit%2Fformat%2Cwebp' }
            ],
            selectedPreviewIndex: 0,
            selectedTab: 0,
            showFavorite: false,
            tabs: [
                { label: '全部', value: 0 },
                { label: '我收藏的', value: 1 },
                { label: '生成中', value: 2 },
                { label: '已完成', value: 3 }
            ],
            activeIndex: 0
        }
    },
    computed: {
        // 图片图标引用
        imageIcon() {
            return AddPicture;
        },
        filteredPreviewImages() {
            if (this.selectedTab === 0) {
                return this.previewImages;
            } else if (this.selectedTab === 1) {
                return this.previewImages.filter(item => this.showFavorite);
            } else if (this.selectedTab === 2) {
                return this.previewImages.filter(item => !this.showFavorite);
            } else {
                return this.previewImages;
            }
        }
    },
    setup() {
  
    },
    methods: {
        handleClose() {
            this.$emit('close');
        },
        selectMode(val: number) {
            this.selectedMode = val;
            this.showModeDropdown = false;
        },
        onBusinessLicenseChange(file: any) {
            console.log(file);
        },
        scrollToCard(index: number) {
            this.activeIndex = index;
            this.$nextTick(() => {
                const card = this.$refs[`card-${index}`];
                if (Array.isArray(card) && card.length > 0 && card[0] instanceof HTMLElement) {
                    (card[0] as HTMLElement).scrollIntoView({ behavior: 'smooth', block: 'center' });
                } else if (card && (card as HTMLElement).scrollIntoView) {
                    (card as HTMLElement).scrollIntoView({ behavior: 'smooth', block: 'center' });
                }
            });
        },
        handlePreview(type: number) {
            const preview = this.$refs.previewRef as PreviewComponent;
            if (preview) {
                preview.taskType = type;
                preview.loadVideoList(true);
            }
        },
        handleShowEffectPanel() {
            this.showEffectPanel = true;
            this.showVideoPanel = false;
            this.showImagePanel = false;
        },
        handleShowVideoPanel() {
            this.showVideoPanel = true;
            this.showEffectPanel = false;
            this.showImagePanel = false;
        },
        handleShowImagePanel() {
            this.showImagePanel = true;
            this.showEffectPanel = false;
            this.showVideoPanel = false;
        }
    },
    mounted() {
        document.body.setAttribute('arco-theme', 'dark')
    }
});
</script>

<style scoped>
:deep(.arco-scrollbar-track-direction-vertical) {
    right: -20px !important;
}
</style>